<template>
  <view class="mine">
    <view class="my-data">
      <view class="user-box">
        <view class="user-info">
          <image :src="userInfo.avatar" class="user-img"></image>
        </view>
        <view class="user-name">
          <text>{{ userInfo.name }}</text>
        </view>
        <view class="user-phone">
          <text>{{ userInfo.phone }}</text>
        </view>
      </view>

      <view class="cell-group">
        <view v-for="(item, index) in myData" :key="index" class="cell clickable" @tap="goRouter(item.url)">
          <view class="cell-title">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const userInfo = reactive({
  name: '张三',
  age: 18,
  sex: '男',
  phone: '12345678901',
  // 头像
  avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
});

const myData = [
  {
    text: '我签约的房屋',
    url: '/pages/signup/mySignup'
  },
  {
    text: '我的合同',
    url: '/pages/mine/myContract'
  },
  {
    text: '个人信息',
    url: '/pages/mine/userInfo'
  },
  {
    text: '意见反馈',
    url: '/pages/feedback/feedBack'
  }
];

const goRouter = (url: string) => {
  uni.navigateTo({
    url
  });
};
</script>

<style scoped>
.mine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my-data {
  width: 100%;
  padding: 20rpx;
}

.user-box {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}

.user-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  flex: 1;
}

.user-phone {
  color: #666;
}

.cell-group {
  margin-top: 20rpx;
}

.cell {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #ebebeb;
}

.cell:last-child {
  border-bottom: none;
}

.cell-title {
  flex: 1;
  font-size: 32rpx;
}

.clickable {
  cursor: pointer;
}
</style>
